<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<style>
#eyeInfo {
	display: float;
	float: left;
}

.barSpan {
	float: right;
	width: 80%;
}

.tab {
	margin-bottom: 0px;
	margin-top: 6px;
}

.tab>li>a {
	line-height: 22px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.tab-content {
	border: 1px solid #E3E3E3;
	border-radius: 0px 0px 4px 4px;
	border-top: none;
	padding: 2px;
}

.table [valign="top"] {
	vertical-align: top;
}

#newOrder div[id^=m] {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	margin: 2px;
	padding: 2px;
	line-height: 25px;
	float: left;
	min-height: 30px;
	width: 99%;
}

.title {
	width: 60px;
	margin-left: 20px;
}

table {
	width: 100%;
}

#sumTotal td {
	border-left: none;
	border-bottom: none;
	border-right: none;
	padding-left: 15px;
}
</style>
<ul class="nav nav-tabs tab tBlock">
	<li class="active"><a title="新增订单" deny="not" class="nFocus" href="#newOrder" data-toggle="tab"> <i class="icon-heart"></i> 我要下单
	</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="newOrder">
		<form id="inputForm" class="form-inline" action="${ctx}/adoms/order/order" method="post">
			<input type="hidden" name="id" value="${order.id}" />
			<table class="table table-striped table-bordered table-condensed">
				<tr class="hide">
					<td class="span2">订单名称:</td>
					<td>
						<input id="name" class="span4" name="name" type="text" value="${order.name}" size="30" maxlength="80" />
					</td>
				</tr>
				<tr>
					<td class="span2">发货部门:</td>
					<td>
						<select id="departmentTarget" name="departmentTarget.id" style="width: auto; min-width: 200px;">
							<option value="" id="dPlz">请选择...</option>
							<c:forEach items="${dList }" var="d" varStatus="index">
								<option value="${d.id }">${index.index + 1}.${d.name }</option>
							</c:forEach>
						</select>
					</td>
				</tr>
				<tr>
					<td class="span2">订购商品:</td>
					<td>
						<select id="marchandise" name="marchandise.id" style="width: auto; min-width: 200px;">
							<option value="0" id="plz">请选择...</option>
							<c:forEach items="${mList }" var="m" varStatus="index">
								<option value="${m.id }">${index.index + 1}.${m.name }</option>
							</c:forEach>
						</select>
						(可选择多个商品)
					</td>
				</tr>
				<tr>
					<td class="span2" valign="top">商品订购详情:</td>
					<td>
						<div id="eyeInfo" style="width: 100%;">
							<table id="mmmm" minfo class="table-striped table-bordered table-condensed" style="margin: auto; width: 100%;">
								<tr>
									<th>商品名称</th>
									<th>单价(元)</th>
									<th>规格</th>
									<th>件数</th>
									<th>每件数量</th>
									<th>数量</th>
									<th>总价(元)</th>
									<th>操作</th>
								</tr>
								<c:forEach items="${mList }" var="m" varStatus="index">
									<tr disable="disable" class="hide" id="m${m.id }">
										<td>
											${index.index + 1}.${m.name }
											<input type="hidden" name="marchandise.id" value="${m.id }">
										</td>
										<td>
											<span class="tRed" name="mPrice">${m.price }/${m.packageing }</span>
										</td>
										<td>
											<span>${m.spcification }</span>
										</td>
										<td>
											<input name="boxNum" maxlength="8" value="0" type="text" class="tRed span1">
											(件)
										</td>
										<td>
											<span name="numOfBox">${m.numOfBox }</span>
											${m.packageing }
										</td>
										<td>
											<input name="items" maxlength="8" value="0" type="text" class="tRed span1">
											(${m.packageing })
										</td>
										<td>
											<input name="totalPrice" type="text" value="0.0" readonly="readonly" style="width: auto; cursor: auto; border: none; background: #FFFFFF; box-shadow: none;">
										</td>
										<td>
											<a class="rclose" value="${m.id }" to="#m${m.id }" title="删除商品" href="#"> <i class=" icon-remove"></i> 删除
											</a>
										</td>
									</tr>
								</c:forEach>
								<tr id="sumTotal">
									<td>合 计</td>
									<td></td>
									<td></td>
									<td id="availableTotalBox">0.00</td>
									<td></td>
									<td id="availableTotalItems">0</td>
									<td id="availableTotalPrice">0.00</td>
									<td></td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
				<tr class="hide">
					<td>商品单价:</td>
					<td class="tBlue">
						￥
						<span id="mPrice" class="tRed">0.00</span>
						(元)
					</td>
				</tr>
				<tr>
					<td>总数量:</td>
					<td>
						<input style="width: auto; cursor: auto; border: none; background: #FFFFFF; box-shadow: none;" id="goodsNumber" name="goodsNumber" readonly="readonly" type="text" value="0" size="30"
							maxlength="50" />
					</td>
				</tr>
				<tr>
					<td>总价:</td>
					<td>
						<input style="width: auto; cursor: auto; border: none; background: #FFFFFF; box-shadow: none;" id="totalCost" readonly="readonly" class="span2" name="totalCost" type="text" value="0.00"
							size="30" maxlength="50" />
						(元)
					</td>
				</tr>
				<tr>
					<td>联系电话:</td>
					<td>
						<input id="phone" name="phone" type="text" value="${order.phone}" size="30" maxlength="80" />
					</td>
				</tr>
				<tr>
					<td>收货部门:</td>
					<td>
						<select class="tBlue" id="department" name="department.id">
							<option value="${USER.department.id}">${USER.department.name}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>联系人:</td>
					<td>
						<span class="tBlue">${USER.name }</span>
						<input id="createUser" name="createUser" type="hidden" value="${USER.name }" size="30" maxlength="80" />
					</td>
				</tr>
				<tr>
					<td valign="top">备注:</td>
					<td>
						<textarea id="memo" name="memo" rows="3" class="span6">${order.memo}</textarea>
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2">
						<a id="myOrder" class="hide" href="${ctx }/adoms/order/myOrderList">我的订单</a>
						<input id="submitBtn" class="btn span2 btn-primary" disabled="disabled" type="button" value="提交订单" />
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<script>
	$(document).ready(function() {
		//为inputForm注册validate函数
		$("#inputForm").validate({
			rules : {
				totalCost : {
					required : true,
					number : true
				},
				phone : "required",
				receivedTime : "required",
				//name : "required",
				orderChargeUser : "required",
				orderCreateTime : "required",
				status : "required",
				"department.id" : "required",
				"departmentTarget.id" : "required",
				createUser : "required",
				goodsNumber : {
					required : true,
					number : true
				}
			}
		});
		//展示商品详情
		$("#idShow").toggle(function() {
			$("#eyeInfo").show("slow");
			$(this).html("隐藏商品详情");
			$(".icon-eye-open").attr("class", "icon-eye-close");
		}, function() {
			$(".icon-eye-close").attr("class", "icon-eye-open");
			$(this).html("显示商品详情");
			$("#eyeInfo").hide("slow");
		});
		//
		$("#marchandise").change(function() {
			try {
				var mid = $(this).val();
				if (mid) {
					$("option[value=" + mid + "]", this).hide();
					$("div", $("#m" + mid)).hide(); //隐藏已经选择的项
					$("#m" + mid).show("slow").attr("disable", "false");
					$("#mPrice").html($("[mPrice]", $("#m" + mid)).html());
					$("#goodsNumber").keyup();
				}
				//$("#plz").remove();
				//$("#plz").attr("selected", "selected");
			} catch (e) {
			}
		});
		$("#departmentTarget").change(function() {
			$("#dPlz").remove();
		});
		$("a.rclose").click(function() {
			var taget = $($(this).attr("to"));
			taget.hide("slow").attr("disable", "disable");
			clearHistory(taget);
			//显示下拉框的商品选项
			var optionValue = $(this).attr("value");
			$("#marchandise option[value=" + optionValue + "]").show();
			countNum();
			return false;
		});
		$("a.exspan").toggle(function() {
			var taget = $($(this).attr("to"));
			$("div", taget).show("slow");
			return false;
		}, function() {
			var taget = $($(this).attr("to"));
			$("div", taget).hide("slow");
			return false;
		});
		$("div[id^=m]").each(function() {
			var _self = $(this);
			$("input[name=boxNum],input[name=items]", _self).keyup(function() {
				var boxNum = parseInt($("input[name=boxNum]", _self).val());
				var items = parseInt($("input[name=items]", _self).val());
				var numOfBox = parseInt($("[name=numOfBox]", _self).html());
				countNum();
			});
		});
		$("#submitBtn").mousedown(function() {
			var len = $("[disable=false]").length;
			if (len == 0) {
				return false;
			}
			var result = 0;
			//先清理Session中的值
			$.post("${ctx}/adoms/orderLine/clearOlines", function(data) {
				$("[disable=false]").each(function() {
					var form = $("<form></form>");
					var parent = $(this).parent();
					form.append($(this));
					$.post("${ctx}/adoms/orderLine/addOlines", form.serialize(), function(data) {
						if (data > 0) {
							result++;
							if (result == len) {
								$("#inputForm").submit();
							}
						} else {
							msgAlert.show("商品订购数量不能为零!");
							return false;
						}
					}, 'json');
					parent.prepend($(this));
				});
			}, 'json');
			return false;
		});
		//分行计数设置数量和总价
		$("#mmmm tr").each(function() {
			var _self = $(this);
			$("[name=boxNum]", _self).on("blur keyup", function() {
				try {
					var boxNum = parseFloat($(this).val());
					var numOfBox = parseInt($("[name=numOfBox]", _self).html());
					if (isNaN(boxNum)) {
						boxNum = 0;
						$(this).val(0);
					} else if (isNaN(numOfBox)) {
						numOfBox = 0;
					}
					$("[name=items]", _self).val((boxNum * numOfBox).toFixed(0));
					var items = parseInt($("[name=items]", _self).val());
					var mPrice = parseFloat($("[name=mPrice]", _self).text());
					if (isNaN(items)) {
						items = 0;
					} else if (isNaN(mPrice)) {
						mPrice = 0;
					}
					$("[name=totalPrice]", _self).val((mPrice * items).toFixed(2));
				} catch (e) {
					$("[name=items]", _self).val(0);
					$("[name=totalPrice]", _self).html(0);
				}
				countTotal();
			});
			$("[name=items]", _self).on("blur keyup", function() {
				try {
					var items = parseInt($(this).val());
					var numOfBox = parseInt($("[name=numOfBox]", _self).html());
					var mPrice = parseFloat($("[name=mPrice]", _self).text());
					if (isNaN(numOfBox)) {
						numOfBox = 0;
					} else if (isNaN(items)) {
						items = 0;
						$(this).val(0);
					} else if (isNaN(mPrice)) {
						mPrice = 0;
					}
					$("[name=totalPrice]", _self).val((mPrice * items).toFixed(2));
					$("[name=boxNum]", _self).val((items / numOfBox).toFixed(2));
				} catch (e) {
					$("[name=totalPrice]", _self).html(0);
					$("[name=boxNum]", _self).val(0);
				}
				countTotal();
			});
		});
	});
	function clearHistory(oBject) {
		$("input:text", oBject).val(0);
		$("input[name=totalPrice]", oBject).val("0.0");
		$("#marchandise #plz").attr("selected", "selected");
		//$("#marchandise").val("请选择...");
	}
	function countNum() {
		var prices = $("[disable=false] input[name=totalPrice]");
		var price = 0.0;
		$.each(prices, function(i, item) {
			price += parseFloat($(item).val());
		});
		$("#totalCost").val(price.toFixed(2));
		$(":button").removeAttr("disabled");
		countTotal();
	}
	//统计并计算总价
	function countTotal() {
		var boxNums = 0;
		var items = 0;
		var prices = 0;
		$('tr[disable=false]').each(function() {
			boxNums += parseFloat($("[name=boxNum]", this).val());
			items += parseInt($("[name=items]", this).val());
			prices += parseFloat($("[name=totalPrice]", this).val());
		});
		$("#availableTotalBox").html(boxNums.toFixed(2));
		$("#availableTotalItems").html(items);
		$("#availableTotalPrice").html(prices.toFixed(2));
		$("#totalCost").val(prices.toFixed(2));
		$("#goodsNumber").val(items);
		$(":button").removeAttr("disabled");
	}
</script>
<c:if test="${msg != null}">
	<script>
		msgAlert.show("${msg}");
		$("#myOrder").click();
	</script>
</c:if>